<template>
  <div class="section-header text-center section-header--dark">
    <h2 class="style2-h2">What did the guardians say to us</h2>
    <p class="style2">Interdum et malesuada fames ac ante ipsum</p>
  </div>
  <div class="testimonial__wrapper">
    <div class="testimonial__wrapper">
      <swiper
        :modules="[Thumbs]"
        :thumbs="{ swiper: thumbsSwiper }"
        :slides-per-view="1"
      >
        <swiper-slide v-for="(item, index) in testimonials" :key="index">
          <div class="testimonial__item">
            <div class="testimonial__item-inner">
              <div class="testimonial__item-content">
                <span><i class="fa-solid fa-quote-left"></i></span>
                <blockquote class="blockquote">
                  <p>
                    Our family was traveling via bullet train between cities in
                    japan with our luggage - the location for this hotel made
                    that so easy. Agoda price was fantastic.
                  </p>
                </blockquote>
                <blockquote class="blockquote">
                  <p></p>
                </blockquote>
                <div class="testimonial__item-author">
                  <p>{{ item.name }}</p>
                  <span>{{ item.role }}</span>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <swiper
        class="testimonial__author mt-5"
        :modules="[Thumbs]"
        watch-slides-progress
        @swiper="setThumbsSwiper"
        :slides-per-view="4"
        :breakpoints="breakpointsTumbs"
        :space-between="10"
      >
        <swiper-slide v-for="(itm, idx) in testimonials" :key="idx">
          <div class="testimonial__author-thumb">
            <img :src="itm.thumbnail" alt="author" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
    return {
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
    };
  },

  props: {
    testimonials: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      spaceBetween: 24,
      watchSlidesProgress: true,
      loop: true,
      clickable: true,
      breakpoints: {
        576: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 2,
        },
        992: {
          slidesPerView: 3,
          spaceBetween: 15,
        },
        1200: {
          slidesPerView: 4,
          spaceBetween: 24,
        },
      },
      breakpointsTumbs: {
        768: {
          slidesPerView: 5,
        },
        1200: {
          slidesPerView: 5,
          spaceBetween: 15,
        },
        1440: {
          slidesPerView: 5,
          spaceBetween: 20,
        },
      },
    };
  },
};
</script>